<template>
  <!-- 查询区域 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="200px">
          <a-form-item label="登记名" :label-col="{ style: { width: '55px' } }">
            <a-input placeholder="" v-model:value="queryParam.djm"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="280px">
          <a-form-item label="卡号" :label-col="{ style: { width: '50px' } }">
            <a-input placeholder="" v-model:value="queryParam.code"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float: right; width: 90px; margin-right: 0px">
          <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" preIcon="ant-design:search" @click="searchQuery" class="mr-5px">查询</a-button>
            <a-button type="primary" color="success" preIcon="ant-design:plus-outlined" @click="handleCreate" class="ml-20px mr-5px" v-auth="'bank:add'">新增</a-button>
            <a-button type="primary" color="error" preIcon="ant-design:edit-outlined" @click="handleEdit" class="mr-5px" v-auth="'bank:edit'">编辑</a-button>
            <a-button type="primary" color="warning" preIcon="ant-design:export-outlined" @click="handleTransfer" v-auth="'bank:transfer'">划转</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName">
    <template #bankname="{ text, record }">
      <svg class="icon svg-icon bank-icon" aria-hidden="true" style="" v-if="record.logo">
        <use :xlink:href="'#icon-' + record.logo"></use>
      </svg>
      <Image width="16px" src="../logo2.png" v-else></Image>
      <span style="float: left">{{ text }}</span>
    </template>
  </BasicTable>
  <!-- table区域-end-->

  <!-- 表单区域 -->
  <bank-modal @register="registerBankAdd" @success="modalFormOk"></bank-modal>
  <bank-transfer @register="registerBankTransfer" @success="modalFormOk"></bank-transfer>
</template>

<script lang="ts" setup name="bank-list">
  import { Image } from 'ant-design-vue';
  import { BasicTable, BasicColumn, FormSchema } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { bankList } from '/@/views/full/bank/types/bank.api';
  import { render } from '/@/utils/common/renderUtils';
  import { reactive, toRaw, unref, ref } from 'vue';
  import { useModal } from '/@/components/Modal';
  import { filterObj } from '/@/utils/common/compUtils';
  import { usePermission } from '/@/hooks/web/usePermission';

  import BankModal from '/@/views/full/bank/modules/BankModal.vue';
  import BankTransfer from '/@/views/full/bank/modules/BankTransfer.vue';

  //初始化 -------------------------------------------------------------
  //定义查询表单，查询条件
  const queryParam = reactive<any>({
    djm: '',
    code: '',
  });

  //订单列表 - 表头
  const columns: BasicColumn[] = [
    { title: '排序', align: 'center', dataIndex: 'sort', width: 30 },
    { title: '登记名', align: 'left', dataIndex: 'djm', width: 126, slots: { customRender: 'bankname' } },
    { title: '编号', align: 'center', dataIndex: 'id', width: 30 },
    { title: '户名', align: 'left', dataIndex: 'name', width: 150 },
    { title: '开户行', align: 'left', dataIndex: 'khh', width: 110 },
    { title: '卡号', align: 'left', dataIndex: 'code', width: 110 },
    { title: '状态', align: 'center', dataIndex: 'stat', width: 40, customRender: ({ text }) => render.renderDict(text, 'stateType') },
    { title: '已审余额', align: 'right', dataIndex: 'ysye', width: 78, className: 'text-green-500' },
    { title: '未审余额', align: 'right', dataIndex: 'wsye', width: 78, className: 'text-blue-500' },
    { title: '银行余额', align: 'right', dataIndex: 'lsye', width: 78, className: 'text-red-500' },
  ];

  const { prefixCls, tableContext } = useListPage({
    designScope: 'bank-list',
    tableProps: {
      api: bankList,
      columns: columns,
      pagination: false,
      showTableSetting: false,
      showIndexColumn: false,
      showActionColumn: false,
      resizeHeightOffset: 40,
      useSearchForm: false,
      showSummary: true,
      summaryFunc: handleSummary,
      beforeFetch: (params) => Object.assign(params, filterObj(queryParam)),
    },
  });

  //注册table数据
  const [registerTable, { reload, setProps, getRawDataSource, redoHeight }] = tableContext;

  function searchQuery() {
    setProps({ searchInfo: toRaw(queryParam) });
    reload();
  }

  function searchReset() {
    Object.assign(queryParam, { ddlxIds: '', ddzt: '', ywlx: '' });
    reload();
  }

  function handleSummary(tableData: Recordable[]) {
    const res = getRawDataSource();
    if (res) {
      return getRawDataSource().summary;
    } else {
      return [];
    }
  }

  //新增订单---------------------------------------------------------------------
  const [registerBankAdd, { openModal: openBank }] = useModal();

  function handleCreate() {
    openBank(true, { isUpdate: false });
  }

  /**
   * 编辑事件
   */
  const { hasPermission } = usePermission();
  async function handleEdit(record: Recordable) {
    if (!hasPermission('bank:edit')) {
      return false;
    }
    Object.assign(record, selectRows);
    openBank(true, { record, isUpdate: true });
  }

  function modalFormOk() {
    reload();
  }

  //单击行
  let selectRows = reactive<any>({ id: '', username: '' });
  function handleClick(record) {
    selectRows.id = record.id;
    selectRows.username = record.username;
  }

  //双击行
  function handleDblclick(record) {
    handleEdit(record);
  }

  function rowClassName(record, index) {
    return record.id === selectRows.id ? 'row-selected' : '';
  }

  //划转--------------------------------------------------------------
  const [registerBankTransfer, { openModal: openBankTransfer }] = useModal();
  function handleTransfer() {
    openBankTransfer(true, { isUpdate: false });
  }

  function toNumber(v) {
    let n = 0;
    if (v) {
      n = v;
    }
    return Number(n).toFixed(2);
  }
</script>
<style scoped>
  ::v-deep(.bank-icon) {
    width: 17px;
    height: 17px;
    line-height: 17px;
    margin-right: 5px;
    margin-top: 2px;
    float: left
  }
  ::v-deep(.ant-image) {
    float: left!important;
    margin-right: 5px;
    margin-top: -1px;
  }
</style>
